{% extends 'layout.html' %}
{% block content %}
    <div class="mobiledj_container">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading"><i class="fa fa-bar-chart" aria-hidden="true"></i>网络资源使用统计</div>
            <!-- Table -->
            <table class="table table-bordered">
                <theader>
                    <tr>
                        {% for item in header_list %}
                            <th>{{ item }}</th>
                        {% endfor %}
                    </tr>
                </theader>
                <tbody>
                {% for row in ip_subnet_statistic %}
                    <tr>
                        {% for item in row.content %}
                            {% if forloop.last %}
                                <td>{{ item }}%</td>
                            {% else %}
                                <td>{{ item }}</td>
                            {% endif %}
                        {% endfor %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {% for supernetting in ip_subnet_chart %}
            <div class="col-md-6 chart-area">
                <div class="panel panel-default">
                    <div class="panel-heading">子网<b>{{ supernetting.subnet  }}</b></div>
                    <div class="panel-body">
                        <div id="{{ supernetting.subnet }}" style="height:400px;"></div>
                    </div>
                </div>
            </div>

        {% endfor %}
    </div>
{% endblock %}
{% block js %}

    <script type="text/javascript">
        {% for supernetting in ip_subnet_chart %}
            var myChart = echarts.init(document.getElementById('{{ supernetting.subnet }}'));
            var option = {
                title: {
                    text: '超网{{ supernetting.subnet }}',
                    subtext: '业务类型占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    data: [
                        {% for item in supernetting.header %}
                            '{{ item }}',
                        {% endfor %}
                    ]
                },
                series: [
                    {
                        name: '业务类型占比',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            {% for k,v in supernetting.account.items %}
                                {value: {{ v }}, name: '{{ k }}'},
                            {% endfor %}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        {% endfor %}
    </script>
{% endblock %}